<template>
  <el-card class="box-card">
    <el-form label-width="80px">
      <el-form-item label="SPU名称">
        <span>{{ spu.spuName }}</span>
      </el-form-item>

      <el-form-item label="SKU名称">
        <el-input placeholder="请输入SKU名称" />
      </el-form-item>

      <el-form-item label="价格">
        <el-input-number
          v-model="sku.price"
          controls-position="right"
          @change="handleChange"
          :min="0"
          class="save-sku-input-number"
        />
      </el-form-item>

      <el-form-item label="重量">
        <el-input-number
          v-model="sku.weight"
          controls-position="right"
          @change="handleChange"
          :min="0"
          class="save-sku-input-number"
        />
      </el-form-item>

      <el-form-item label="SKU描述">
        <el-input type="textarea" placeholder="请输入SKU描述" />
      </el-form-item>

      <el-form-item label="平台属性">
        <el-row>
          <el-col
            :xs="24"
            :md="12"
            :lg="8"
            :xl="6"
            v-for="(attrValue, index) in attrValueList"
            :key="attrValue.id"
          >
            <el-form-item :label="attrValue.attrName" class="save-sku-select">
              <el-select placeholder="请选择平台属性">
                <el-option
                  :label="attr.valueName"
                  :value="attr.attrId"
                  v-for="attr in attrValue.attrValueList"
                  :key="attr.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form-item>

      <el-form-item label="销售属性">
        <el-row>
          <el-col
            :xs="24"
            :md="12"
            :lg="8"
            :xl="6"
            v-for="(saleAttrValue, index) in saleAttrValueList"
            :key="index"
          >
            <el-form-item
              :label="saleAttrValue.saleAttrName"
              class="save-sku-select"
            >
              <el-select>
                <el-option
                  :label="saleAttr.saleAttrValueName"
                  :value="saleAttr.baseSaleAttrId"
                  v-for="saleAttr in saleAttrValue.spuSaleAttrValueList"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form-item>

      <el-form-item label="SKU图片">
        <el-table
          border
          style="width: 100%"
          v-for="(img, index) in imageList"
          :key="index"
        >
          <el-table-column type="selection" align="center" width="50" />

          <el-table-column prop="" label="图片" />
          <el-table-column prop="" label="名称" />

          <el-table-column label="操作">
            <template v-slot="{ row }">
              <el-button type="primary">设置默认图片</el-button>
              <el-button type="success" disabled>默认图片</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { mapState } from 'vuex'
import { reqGetAttrList } from '@/api/product/attr'
import { reqGetSpuSaleAttrList, reqGetSpuImageList } from '@/api/product/spu'
export default {
  name: 'SaveSku',
  props: {
    spu: {
      type: Object
    }
  },
  data() {
    return {
      sku: {
        // sku名称
        skuName: '',
        // 价格
        price: 0,
        // 重量
        weight: 0,
        // sku描述
        skuDesc: '',
        // 平台属性列表
        skuAttrValueList: [
          // {
          //   attrId: 0,
          //   attrName: 'string',
          //   valueId: 0,
          //   valueName: 'string'
          // }
        ],
        // 销售属性列表
        skuSaleAttrValueList: [
          // {
          //   saleAttrId: 0,
          //   saleAttrName: 'string',
          //   saleAttrValueId: 0,
          //   saleAttrValueName: 'string'
          // }
        ],
        // 图片列表
        skuImageList: [
          // {
          //   imgName: 'string',
          //   imgUrl: 'string',
          //   isDefault: 'string',
          //   spuImgId: 0
          // }
        ],
        // 默认图片
        skuDefaultImg: ''
      },
      // 用于渲染的平台属性数据
      attrValueList: [],
      // 用于渲染的销售属性数据
      saleAttrValueList: [],
      // 用于渲染的图片数据
      imageList: []
    }
  },
  async mounted() {
    // 请求:平台属性/销售属性/图片
    const { id } = this.spu
    const { category1Id, category2Id, category3Id } = this
    const [
      attrValueListRes,
      saleAttrValueListRes,
      imageListRes
    ] = await Promise.allSettled([
      reqGetAttrList({ category1Id, category2Id, category3Id }),
      reqGetSpuSaleAttrList(id),
      reqGetSpuImageList(id)
    ])
    // console.log(attrValueListRes, saleAttrValueListRes, imageListRes)
    if (attrValueListRes.status === 'fulfilled') {
      this.attrValueList = attrValueListRes.value.data
    } else {
      this.$message({
        type: 'error',
        message: '哎呀,获取平台属性数据失败啦'
      })
    }

    if (saleAttrValueListRes.status === 'fulfilled') {
      this.saleAttrValueList = saleAttrValueListRes.value.data
    } else {
      this.$message({
        type: 'error',
        message: '哎呀,获取销售属性数据失败啦'
      })
    }

    if (imageListRes.status === 'fulfilled') {
      this.imageList = imageListRes.value.data
    } else {
      this.$message({
        type: 'error',
        message: '哎呀,获取图片列表失败啦'
      })
    }
  },
  computed: {
    ...mapState('category', ['category1Id', 'category2Id', 'category3Id'])
  },
  methods: {
    handleChange(value) {
      console.log(value)
    }
  }
}
</script>

<style lang="scss" scoped>
.save-sku-select {
  margin-bottom: 20px;
}
</style>
